<template>
	<view class="select-allocated-order-layout">
		<view class="select-allocated-order-header">
			<text>已选择{{totalCount}}条明细，货款总金额：￥{{totalAmount}}</text>
		</view>
		<view class="select-allocated-order-list">
			<view class="select-allocated-order-list-item" v-for="item in dataList" :key="item.id" @tap="didSelectItem(item)">
				<text>调拨单号：{{item.id}}</text>
				<text>时间：{{item.allotTime}}</text>
				<text>类型：{{item.allotType == '1' ? '划拨' : '回拨'}}</text>
				<text>政策：{{item.policyName}}</text>
				<image :src="item.isSelect ? '/static/login/checkboxsel@2x.png' : '/static/login/checkboxnol@2x.png'" mode="aspectFit"></image>
				<view class="line"></view>
			</view>
		</view>
		<xh-empty minHeight="60vh" :show="dataList.length == 0"></xh-empty>
		<view class="submit-btn bottom-btn" style="margin-top: 50rpx;" @tap="submit">确认</view>
		
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { getBillAllotList } from '@/common/api/api.js'
	const props = defineProps(['agentId'])
	const dataList = ref([])
	const totalCount = computed(()=>{
		const res = dataList.value.filter(item=>item.isSelect)
		return res.length
	})
	const totalAmount = computed(()=>{
		let totalMoney = 0.0
		dataList.value.forEach(item=>{
			if(item.isSelect){
				totalMoney += item.allotAmount
			}
		})
		return totalMoney
	})
	//选择明细
	const didSelectItem = (item)=>{
		item.isSelect = !item.isSelect
	}
	console.log(props.agentId)
	const loadData = async ()=>{
		const res = await getBillAllotList({agentId:props.agentId})
		dataList.value = res.result
	}
	const submit = ()=>{
		const res = dataList.value.filter(item=>item.isSelect)
		if(res.length == 0){
			uni.$utils.showToast('请选择调拨订单')
			return
		}
		uni.$emit('selectOrderList',res)
		uni.navigateBack()
	}
	onLoad(()=>{
		loadData()
	})
</script>

<style lang="scss" scoped>
.select-allocated-order-layout{
	padding-bottom: calc(var(--window-bottom) + 180rpx);
	position: relative;
	.select-allocated-order-header{
		padding: 20rpx 30rpx;
		color: $xh-color-9;
		font-size: 26rpx;
	}
	.select-allocated-order-list-item{
		display: flex;
		flex-direction: column;
		position: relative;
		background-color: #fff;
		padding: 30rpx;
		font-size: 26rpx;
		image{
			width: 26rpx;
			height: 26rpx;
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		text:nth-child(n + 2){
			margin-top: 10rpx;
		}
	}
	.bottom-btn{
		position: fixed;
		bottom: calc(var(--window-bottom) + 40rpx);
		left: 0;
		right: 0;
	}
}
</style>
